<template>
  <div>
    <div v-if="isShow && isAdd">
      <div>
        <button @click="add">添加+</button>
      </div>
      <el-table :data="AllPicInfo" style="width: 100%" >
        <el-table-column prop="id" label="id" height="200" />
        <el-table-column prop="picture" label="图片" />
        <el-table-column prop="name" label="图片名称" />
        <el-table-column prop="author" label="作者" />
        <el-table-column prop="info" label="信息" />
        <el-table-column prop="view" label="浏览次数" />
        <el-table-column prop="keys" label="查找关键字" />
        <el-table-column prop="address" label="东西方(1东方2西方)" />
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="deleteThis(scope.row)"
            disabled>删除</el-button>
            <el-button link type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-else-if="!isShow">
      <div>
        <button @click="isShow = true">取消</button>
      </div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="picture">
          <el-input v-model="picture" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="name">
          <el-input v-model="name" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="author">
          <el-input v-model="author" type="author" autocomplete="off" />
        </el-form-item>
        <el-form-item label="info">
          <el-input v-model="info" />
        </el-form-item>
        <el-form-item label="view">
          <el-input v-model.number="view" />
        </el-form-item>
        <el-form-item label="keys">
          <el-input v-model="keys" />
        </el-form-item>
        <el-form-item label="address">
          <el-input v-model.number="address" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">Submit</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-else-if="!isAdd">
      <div>
        <button @click="isAdd = true">取消</button>
      </div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
      <el-form-item label="picture">
          <el-input v-model="picture" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="name">
          <el-input v-model="name" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="author">
          <el-input v-model="author" type="author" autocomplete="off" />
        </el-form-item>
        <el-form-item label="info">
          <el-input v-model="info" />
        </el-form-item>
        <el-form-item label="view">
          <el-input v-model.number="view" />
        </el-form-item>
        <el-form-item label="keys">
          <el-input v-model="keys" />
        </el-form-item>
        <el-form-item label="address">
          <el-input v-model.number="address" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="AddUser()">Submit</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// import qs from 'qs'

export default {
  name: 'ManageUser',
  data () {
    return {
      AllPicInfo: [],
      isShow: true,
      isAdd: true,
      picture: '',
      name: '',
      author: '',
      info: '',
      view: 0,
      keys: '',
      address: 0,
      id: 0
    }
  },
  methods: {
    async deleteThis (row) {
      // console.log(index, row)
      // console.log(row.id)
      await this.$http({
        url: '/manage/deleteuser',
        method: 'GET',
        params: {
          id: row.id
        }
      })
      this.getAllPicInfo()
    },
    edit (row) {
      this.id = row.id
      this.isShow = false
    },
    add () {
      this.isAdd = false
    },
    async AddUser () {
      const picture = this.picture
      const id = this.id
      const author = this.author
      const name = this.name
      const info = this.info
      const view = this.view
      const address = this.address
      const keys = this.keys
      // console.log(id, author, nickname, picture)
      await this.$http({
        url: '/manage/addpic',
        method: 'POST',
        params: { id: id, picture: picture, author: author, nickname: name, info: info, view: view, address: address, keys: keys }
      })
      // console.log(res)
      this.isAdd = true
      this.getAllPicInfo()
    },
    async submitForm () {
      const picture = this.picture
      const id = this.id
      const author = this.author
      const name = this.name
      const info = this.info
      const view = this.view
      const keys = this.keys
      const address = this.address
      await this.$http({
        url: '/manage/editpicinfo',
        method: 'POST',
        params: { id: id, picture: picture, author: author, nickname: name, info: info, view: view, address: address, keys: keys }
      })
      this.isShow = true
      this.getAllPicInfo()
    },
    async getAllPicInfo () {
      const { data: res } = await this.$http({
        url: '/manage/getpicinfo',
        method: 'GET'
      })
      this.AllPicInfo = res.data
      // console.log(this.AllPicInfo)
    }
  },
  created () {
    this.getAllPicInfo()
  }
}
</script>

<style lang="less" scoped>
</style>
<style>
 .el-table .cell{
  word-break: keep-all;
  max-height: 150px;
}
</style>
